<!--  -->
<template>
  <div class="loginBox" v-show="show == 0">
    <div class="loginTag clear tc">
      <div class="item fl" :class="{ cur: logoType == 1 }" @click="taggle(1)">
        <p>登录</p>
        <i
          class="icon"
          :class="{
            icon5: urlParams.version == 5,
            icon6: urlParams.version == 6,
          }"
        ></i>
      </div>
      <div class="fl item" :class="{ cur: logoType == 0 }" @click="taggle(0)">
        <p>快速登录</p>
        <i
          class="icon"
          :class="{
            icon5: urlParams.version == 5,
            icon6: urlParams.version == 6,
          }"
        ></i>
      </div>
    </div>
    <div class="error" v-show="errors">
      <i class="icon sp-tixing"></i>
      {{ errors }}
    </div>
    <div class="goBuy" v-show="buyShow">
      您没有查看该产品权限！
      <span @click="goBuy">去购买</span>
    </div>
    <fastLogin
      ref="myFastLogin"
      :show.sync="logoType"
      @showError="showError"
      @getAuthCode="getAuthCode"
      @toggHeight="toggHeight"
      @submit="submit"
      @goBuy="buyBox"
    ></fastLogin>
    <commonLogin
      ref="myCommonLogin"
      :show.sync="logoType"
      @showError="showError"
      @toggHeight="toggHeight"
      @submit="submit"
      @goBuy="buyBox"
    ></commonLogin>
    <p class="login_info clear">
      <span class="register_ref fl" @click="toggleType(1)">
        <i class="icon sp-zc"></i>
        注册
      </span>
      <span class="fr forget_ref" @click="toggleType(2)"
        >忘记密码？点击找回</span
      >
    </p>
    <input
      type="submit"
      :class="{
        submit5: urlParams.version == 5,
        submit6: urlParams.version == 6,
      }"
      v-if="!loading"
      value="登录"
      :disabled="!toggle"
      @click="submit"
    />
    <input
      type="submit"
      v-else
      value="取消登录"
      :class="{
        submit5: urlParams.version == 5,
        submit6: urlParams.version == 6,
      }"
      :disabled="!toggle"
      @click="noSubmit()"
    />
    <div :class="{ active: loading }">
      <div></div>
    </div>
    <p
      class="tourist"
      @click="tourist"
      v-show="urlParams.version <= 2 && urlParams.version != ''"
    >
      <span>游客</span>
    </p>
    <authCode
      :show.sync="authShow"
      @cancel="cancel"
      @showError="showError"
      @confirm="confirm"
    ></authCode>
  </div>
</template>

<script>
const commonLogin = () => import("./commonLogin");
const fastLogin = () => import("./fastLogin");
const authCode = () => import("./authCode");
import { login } from "../mixins/login";
export default {
  mixins: [login],
  props: {
    show: {
      default: 0,
      type: Number,
    },
  },
  data() {
    return {
      loading: false,
      logoType: 1,
      errors: "",
      buyShow: false,
      authShow: false,
      toggle: 0,
      urlParams: this.$fn.getUrlParams(),
    };
  },
  watch: {
    show() {
      if (this.show != 0) {
        this.noSubmit();
      }
      this.buyShow = false;
    },
  },

  components: {
    commonLogin: commonLogin,
    fastLogin: fastLogin,
    authCode: authCode,
  },

  computed: {},

  mounted() {
    if (
      +localStorage.getItem("autoLogin") &&
      localStorage.getItem("password")
    ) {
      this.toggle = 1;
      this.submit();
    }
    if (localStorage.getItem("password")) {
      this.toggle = 1;
    }
  },
};
</script>
<style lang="scss" scoped>
.loginBox {
  padding: 21px 20px 0;
  box-sizing: border-box;
  .loginTag {
    margin-bottom: 30px;
    height: 46px;
    .item {
      font-size: 16px;
      color: #666666;
      font-weight: 400;
      position: relative;
      cursor: pointer;
      &.fl {
        margin-right: 22px;
      }
      p {
        line-height: 42px;
      }
    }
    .item.cur {
      font-size: 24px;
      color: #333;
      p {
        font-weight: bold;
      }
      .icon {
        display: inline-block;
        width: 23px;
        height: 3px;
        position: absolute;
        left: 50%;
        margin-left: -11.5px;
        background-image: linear-gradient(to right, #f75153, #f9895c);
        &.icon5 {
          background-image: linear-gradient(90deg, #e1bc96, #deb475, #a17542);
        }
        &.icon6 {
          background-image: linear-gradient(90deg, #464c62, #1c1d21);
        }
      }
    }
  }
}
.goBuy {
  position: absolute;
  font-size: 14px;
  color: #666666;
  line-height: 30px;
  font-weight: 400;
  margin-top: -28px;
  span {
    color: #5592e5;
    cursor: pointer;
  }
}
.error {
  position: absolute;
  font-size: 14px;
  color: #ee7625;
  line-height: 30px;
  font-weight: 400;
  margin-top: -27px;
  .icon {
    position: relative;
    top: 1px;
    display: inline-block;
  }
}
.active {
  width: 279px;
  height: 40px;
  position: absolute;
  margin-top: -4px;
  @keyframes mymove {
    from {
      width: 0%;
    }
    to {
      width: 100%;
    }
  }
  div {
    height: 4px;
    background: #ffea02;
    -moz-animation: mymove 1.5s infinite; /* Firefox */
    -webkit-animation: mymove 1.5s infinite; /* Safari and Chrome */
    -o-animation: mymove 1.5s infinite; /* Opera */
    animation: mymove 1.5s linear infinite;
  }
}
.login_info {
  line-height: 18px;
  margin-top: 15px;
  .register_ref {
    cursor: pointer;
    .icon {
      display: inline-block;
      position: relative;
      top: 2px;
    }
    font-size: 16px;
    color: #ea2827;
    font-weight: 400;
  }
  .forget_ref {
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: #5592e5;
  }
}
.tourist {
  text-align: center;
  width: 103px;
  margin: 10px auto 0;
  border-bottom: 1px solid #e6e6e6;
  cursor: pointer;
  font-size: 16px;
  line-height: 36px;
  height: 18px;
  font-weight: 400;
  color: #888888;
  span {
    padding: 0 9px;
    background: #fff;
  }
  &:hover {
    color: #ff5339;
  }
}
input[type="submit"] {
  appearance: none;
  width: 279px;
  font-size: 18px;
  margin-top: 15px;
  font-weight: bold;
  text-align: center;
  border: none;
  outline: none;
  color: #fff;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  display: block;
  border-radius: 5px;
  background-image: linear-gradient(to right, #f74d50, #f88050);
  &.submit5 {
    background-image: linear-gradient(90deg, #e1bc96, #deb475, #a17542);
  }
  &.submit6 {
    color: #dddddd;
    background-image: linear-gradient(90deg, #464c62, #1c1d21);
  }
}
input[type="submit"]:disabled {
  cursor: no-drop;
  background-image: linear-gradient(to right, #f99495, #fab395);
  &.submit5 {
    background: linear-gradient(
      90deg,
      rgba(225, 188, 150, 0.6),
      rgba(222, 180, 117, 0.6),
      rgba(161, 117, 66, 0.6)
    );
  }
  &.submit6 {
    background: linear-gradient(
      90deg,
      rgba(70, 76, 98, 0.6),
      rgba(28, 29, 33, 0.6)
    );
  }
}
</style>
